<template>
  <div class="myself">
    <div class="my_picture">
      <img src="/images/个人简历/logo_paimeng.png" alt="" style="width: 80%;height: 80%;">
    </div>
    <div class="my_info">
      <p>姓名：曹瑞</p>
      <p>年龄：26</p>
      <p>工作年限：3年</p>
      <p>毕业院校：蚌埠学院</p>
      <p>专业：软件工程</p>
      <p>手机号：15156498194</p>
      <p>邮箱：15156498194@163.com</p>
    </div>
  </div>
</template>

<script setup>
</script>

<style lang="scss">
.myself {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  // background-color: red;
  // background-image: url('/images/个人简历/gerenbj.jpg');
  // background-color: rgba(255, 255, 255, $alpha: 1);
  // background-repeat: no-repeat;
  // background-size: cover;

  .my_picture {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .my_info {
    margin-left: 1rem;
    flex: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;


    p {
      color: rgb(212, 114, 180);
      font-weight: 800;
      flex: 1;
      font-size: 14px;
      height: 2rem;
      padding-left: 0.5rem;
      width: calc(100% / 3); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc(100% / 3); // 加入这两个后每个item的宽度就生效了
      max-width: calc(100% / 2); // 加入这两个后每个item的宽度就生效了

      &:last-child {
        display: block;
        width: 100%;
        height: 2rem;
      }
    }
  }
}
</style>